<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">

    <title>在线考试系统</title>
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" />
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

    <!--icheck-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

<body class="horizontal-menu-page">

<section>

<!--    <div th:replace="~{user/commons/common :: commonhead('questionList.html')}"></div>-->


    <!--正文开始-->
<!--    <div class="wrapper">-->
        <div class="col-md-12">
            <!--问题列表开始-->
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        正在答题......
                    </div>
                    <div id="pie-chart-donut" class="pie-chart">
                        <div class="panel-body">


                            <div class="panel">
<!--                                题型开始-->
                                <div class="panel-heading">
                                    <span class="label hidden" id="questionType"></span>
                                </div>
<!--                                题型结束-->
                                <div class="panel-body">
                                    <div class="">
                                        <!--隐藏域-->
                                        <input class="hidden" id="size" >
                                        <input class="hidden" id="hqId" >
<!--                                        <input class="hidden" id="questionType" th:value="${questionType}">-->
                                        <!--隐藏域-->
                                        <h1 class="color-terques" id="qId" ></h1>
                                        <h4 class="color-terques" id="title" th:text="'题目:'"></h4>
                                    </div>
                                </div>
                            </div>

                            <!--选项开始-->

                                <div class="col-md-12 hidden" id="choiceA">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_A" class="btn btn-default" type="button"   style="border-radius: 20px"></button>
                                        <label id="h5_A"  style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceB">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_B" class="btn btn-default" type="button"  style="border-radius: 20px"></button>
                                        <label id="h5_B"  style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceC" >
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_C" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_C" style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceD">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)"  id="btn_D" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_D"  style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceE">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_E" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_E" style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceF">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_F" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_F" style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceG">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_G" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_G" style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceH">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_H" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                        <label id="h5_H" style="font-weight: normal"></label>
                                    </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceI">
                                <div class="panel-body">
                                    <button onclick="clicked(this.value,this)" id="btn_I" class="btn btn-default" type="button" style="border-radius: 20px"></button>
                                    <label id="h5_I" style="font-weight: normal"></label>
                                </div>
                                </div>

                                <div class="col-md-12 hidden" id="choiceJ">
                                    <div class="panel-body">
                                        <button onclick="clicked(this.value,this)" id="btn_J" class="btn btn-default" type="button"  style="border-radius: 20px"></button>
                                        <label id="h5_J" style="font-weight: normal"></label>
                                    </div>
                                </div>
                                <!--选项结束-->

                                <!--解析及答案开始-->
                                <div class="col-md-12 hidden" id="answerDiv">
                                    <div class="alert alert-success alert-block fade in" id="alertType">
                                        <button type="button" class="close close-sm" onclick="$('#answerDiv').addClass('hidden')">
                                            <i class="fa fa-times"></i>
                                        </button>
                                        <h4 id="answerMsg" style="text-align: left">
                                            <i class="icon-ok-sign"></i>
                                        </h4>
                                        <p id="correct" style="text-align: left"></p>
                                        <p id="analysis" style="text-align: left"></p>
                                    </div>
                                </div>
                                <!--解析及答案结束-->

                                <!--下一题上一题开始-->

                            <div class="col-md-12">
                                <div class="panel-body" style="float: left;">
                                    <button onclick="sub()" id="sub" type="button" class="btn btn-info hidden"><i class="fa fa-check"></i> 提交</button>
                                </div>
                                <div class="panel-body" style="float: right;">
                                    <button onclick="lastQuestion(this.value,this)"  id="lastQ" type="button" class="btn btn-info " ><i class="fa fa-arrow-left"></i> 上一题</button>
                                    <button onclick="nextQuestion(this.value,this)"  id="nextQ" type="button" class="btn btn-info ">下一题 <i class="fa fa-arrow-right"></i> </button>
                                </div>
                            </div>



<!--                                <div class="col-md-12">-->
<!--                                    <ul class="pager">-->
<!--                                        <li class="previous col-md-6" th:value="${qId}-1" id="lastQ"><a class="col-md-3" href="javascript:;" onclick="nextQuestion(this.parentNode.value,this)">← 上一题</a></li>-->

<!--                                        <a href="javascript:;" onclick="sub()" class="col-md-3">确定</a>-->

<!--                                        <li class="next col-md-6" th:value="${qId}+1" id="nextQ"><a class="col-md-3" href="javascript:;" onclick="nextQuestion(this.parentNode.value,this)">下一题 →</a></li>-->
<!--                                    </ul>-->
<!--                                </div>-->
                                <!--下一题上一题结束-->
                        </div>
                    </div>
                </div>
            </div>
            <!--分类标签开始-->
            <div class="col-md-12">
                <div class="panel">
                    <header class="panel-heading">分类标签
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <span class="label hidden" id="difficult"></span>
                    </div>
                </div>
            </div>
            <!--分类标签结束-->
        </div>

<!--    </div>-->
    <!--正文结束-->

    <!--底部开始-->
    <footer class="sticky-footer">
        2022 &copy;<a href="https://www.pdsu.edu.cn/" target="_blank">平顶山学院软件应用双创实验室提供技术支持</a>
    </footer>
    <!--底部结束-->

</section>

<div th:replace="~{user/commons/common :: commonupdatePwd}"></div>


<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>

<script type="text/javascript">






    //初始化操作
    // $(document).ready( function() {
    //     var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
    //     var len = $('#size').val()
    //     for(var i =0;i<len;i++){
    //         //移除隐藏状态、
    //         $("#choice"+arr[i]+"").removeClass("hidden")
    //     }
    //     //解析隐藏状态
    //     $('#answerDiv').addClass('hidden')
    //     //题目难度状态
    //     var dif = document.getElementById('difficult').innerHTML
    //     if(dif=='1'){
    //         $('#difficult').addClass("label-success").text("简单")
    //     }else if(dif=='2'){
    //         $('#difficult').addClass("label-warning").text("中等")
    //     }else if(dif=='3'){
    //         $('#difficult').addClass("label-danger").text("困难")
    //     }else{
    //         $('#difficult').addClass("label-default").text("未分")
    //     }
    //     $('#difficult').removeClass('hidden')
    //     //题型
    //     var qType = document.getElementById('questionType').innerHTML
    //     if(qType=='1'){
    //         $('#questionType').addClass("label-success").text("单选题")
    //         $("#sub").addClass('hidden')
    //     }else if(qType=='2'){
    //         $('#questionType').addClass("label-warning").text("多选题")
    //         $("#sub").removeClass('hidden')
    //     }else if(qType=='3'){
    //         $('#questionType').addClass("label-danger").text("判断题")
    //         $("#sub").addClass('hidden')
    //     }else{
    //         $('#questionType').addClass("label-default").text("未分类")
    //     }
    //     $('#questionType').removeClass('hidden')
    // });

    // 下一题：
    function nextQuestion(value,_this) {
        //使按钮失去焦点,不设置会导致按钮持续高亮
        _this.blur()
        //用户选择失去高亮
        var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
        for(var i=0;i<arr.length;i++){
            $("#btn_"+arr[i]+"").attr('class','btn btn-default')
        }
        value = Number(document.getElementById('hqId').value)
        //解析隐藏状态
        $('#answerDiv').addClass('hidden')
        $.ajax({
            //请求路径
            url: "/user/nextQuestionDetail",
            //请求类型
            type: "POST",
            //data表示发送的数据
            data: JSON.stringify({
                id: value
            }), //定义发送请求的数据格式为JSON字符串
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if(data.code==500){
                    alert("没有下一题了☹")
                }
                if(data.code==200){
                    //改变本题id,包括隐藏域的qId
                    $('#qId').attr("value",data.id).attr("text",data.id).html(data.id+":")
                    $('#hqId').attr("value",data.id)
                    //改变题目
                    $('#title').html(data.questionObject.titleContent)
                    //改变题目显示的难度
                    if(data.difficult=='1'){
                        $('#difficult').attr('class','label label-success').text("简单")
                    }else if(data.difficult=='2'){
                        $('#difficult').attr('class','label label-warning').text("中等")
                    }else if(data.difficult=='3'){
                        $('#difficult').attr('class','label label-danger').text("困难")
                    }else{
                        $('#difficult').attr('class','label label-default').text("未分类")
                    }
                    $('#difficult').removeClass('hidden')
                    //改变题目显示的类型
                    if(data.questionType==1){
                        $('#questionType').attr('class','label label-success').text("单选题")
                        $("#sub").addClass('hidden')
                    }else if(data.questionType==2){
                        $('#questionType').attr('class','label label-warning').text("多选题")
                        $("#sub").removeClass('hidden')
                    }else if(data.questionType==3){
                        $('#questionType').attr('class','label label-danger').text("判断题")
                        $("#sub").addClass('hidden')
                    }else{
                        $('#questionType').attr('class','label label-default').text("未分类")
                    }
                    $('#questionType').removeClass('hidden')

                    //设置下一题上一题id
                    // $('#nextQ').attr("value",data.id+1)
                    // $('#lastQ').attr("value",data.id-1)

                    var len = data.questionObject.questionItemObjects.length
                    var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
                    for(var i = 0; i<arr.length;i++){
                        $("#choice"+arr[i]+"").addClass("hidden")
                    }
                    for(var i = 0; i<len;i++){
                        $("#choice"+data.questionObject.questionItemObjects[i].prefix+"").removeClass("hidden")

                        $("#btn_"+data.questionObject.questionItemObjects[i].prefix+"").
                        attr("text",data.questionObject.questionItemObjects[i].prefix)
                            .attr("value",data.questionObject.questionItemObjects[i].prefix).
                        html(data.questionObject.questionItemObjects[i].prefix)

                        $("#h5_"+data.questionObject.questionItemObjects[i].prefix+"").
                        attr("text",data.questionObject.questionItemObjects[i].content).
                        html(data.questionObject.questionItemObjects[i].content)
                    }
                }
            },
        })
    }


    function lastQuestion(value,_this) {
        //使按钮失去焦点,不设置会导致按钮持续高亮
        _this.blur()
        //用户选择失去高亮
        var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
        for(var i=0;i<arr.length;i++){
            $("#btn_"+arr[i]+"").attr('class','btn btn-default')
        }
        value = Number(document.getElementById('hqId').value)
        //解析隐藏状态
        $('#answerDiv').addClass('hidden')
        $.ajax({
            //请求路径
            url: "/user/lastQuestionDetail",
            //请求类型
            type: "POST",
            //data表示发送的数据
            data: JSON.stringify({
                id: value
            }), //定义发送请求的数据格式为JSON字符串
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if(data.code==200){
                    //改变本题id,包括隐藏域的qId
                    $('#qId').attr("value",data.id).attr("text",data.id).html(data.id+":")
                    $('#hqId').attr("value",data.id)
                    //改变题目
                    $('#title').html(data.questionObject.titleContent)
                    //改变题目显示的难度
                    if(data.difficult=='1'){
                        $('#difficult').attr('class','label label-success').text("简单")
                    }else if(data.difficult=='2'){
                        $('#difficult').attr('class','label label-warning').text("中等")
                    }else if(data.difficult=='3'){
                        $('#difficult').attr('class','label label-danger').text("困难")
                    }else{
                        $('#difficult').attr('class','label label-default').text("未分类")
                    }
                    $('#difficult').removeClass('hidden')
                    //改变题目显示的类型
                    if(data.questionType==1){
                        $('#questionType').attr('class','label label-success').text("单选题")
                        $("#sub").addClass('hidden')
                    }else if(data.questionType==2){
                        $('#questionType').attr('class','label label-warning').text("多选题")
                        $("#sub").removeClass('hidden')
                    }else if(data.questionType==3){
                        $('#questionType').attr('class','label label-danger').text("判断题")
                        $("#sub").addClass('hidden')
                    }else{
                        $('#questionType').attr('class','label label-default').text("未分类")
                    }
                    $('#questionType').removeClass('hidden')
                    var len = data.questionObject.questionItemObjects.length
                    var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
                    for(var i = 0; i<arr.length;i++){
                        $("#choice"+arr[i]+"").addClass("hidden")
                    }
                    for(var i = 0; i<len;i++){
                        $("#choice"+data.questionObject.questionItemObjects[i].prefix+"").removeClass("hidden")

                        $("#btn_"+data.questionObject.questionItemObjects[i].prefix+"").
                        attr("text",data.questionObject.questionItemObjects[i].prefix)
                            .attr("value",data.questionObject.questionItemObjects[i].prefix).
                        html(data.questionObject.questionItemObjects[i].prefix)

                        $("#h5_"+data.questionObject.questionItemObjects[i].prefix+"").
                        attr("text",data.questionObject.questionItemObjects[i].content).
                        html(data.questionObject.questionItemObjects[i].content)
                    }
                }
                if(data.code==500) {
                    alert("没有上一题了☹")
                }

            },
        })
    }

    function clicked(uChoice,_this) {
        var qType = document.getElementById('questionType').innerHTML
        if(qType=='单选题'||qType=='判断题'){
            $("#sub").addClass('hidden')
            var arr = ['A','B','C','D','E','F','G','H','I','J']
            for(var i=0;i<arr.length;i++){
                $("#btn_"+arr[i]+"").attr('class','btn btn-default')
            }
            $("#btn_"+uChoice+"").attr('class','btn btn-success')
            answer(uChoice)
        }else if(qType=='多选题'){
            $("#sub").removeClass('hidden')
            var btnColor = $("#btn_"+uChoice+"").attr('class')
            if(btnColor=='btn btn-default'){
                $("#btn_"+uChoice+"").attr('class','btn btn-success')
            }
            if(btnColor=='btn btn-success'){
                $("#btn_"+uChoice+"").attr('class','btn btn-default')
            }
        }
        _this.blur()
    }

    function sub() {
        var arr = ['A','B','C','D','E','F','G','H','I','J']
        var uChoice = '';
        for(var i=0;i<arr.length;i++){
            if($("#btn_"+arr[i]+"").attr('class')=='btn btn-success'){
                uChoice=uChoice+arr[i];
            }
        }
        answer(uChoice)
    }

    function singleChoice(uChoice) {
        var qId = $('#hqId').val()
        $.ajax({
            //请求路径
            url: "/user/answerQuestion",
            //请求类型
            type: "POST",
            //data表示发送的数据
            data: JSON.stringify({
                qId: qId,
                uChoice: uChoice
            }), //定义发送请求的数据格式为JSON字符串
            contentType: "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if (data.code == 200){
                    var res = data.res
                    var correct = data.correct
                    var analysis = data.analysis
                    $('#correct').text("正确答案："+correct)
                    $('#analysis').text("解析："+analysis)
                    if(res==1){//回答正确
                        $('#answerMsg').text('回答正确！')
                        $('#alertType').removeClass("alert-danger").addClass("alert-success")
                        $('#answerDiv').removeClass("hidden")
                    }else{
                        $('#answerMsg').text('回答错误！')
                        $('#alertType').removeClass("alert-success").addClass("alert-danger")
                        $('#answerDiv').removeClass("hidden")
                    }
                }else{
                  alert("系统出现了一点错误，请重试！")
                }

            },
        })
    }
    //按钮点击事件，uChoice为用户选择的选项
    function answer(uChoice) {
        //获取题型
        var qType = document.getElementById('questionType').innerHTML
        //单选多选通用
        singleChoice(uChoice)
        // if(qType=='单选题'||qType=='判断题'){
        //     singleChoice(uChoice)
        // }
        // //多选题操作：
        // if(qType=='多选题'){
        //     singleChoice(uChoice)
        // }
    }


    // 修改密码
    $("#pwd_btn").click(function() {
        $("#pwd_btn").blur();
        if (confirm("是否确定修改?")){
            var submit = true;
            var oldPwd = $("#oldPwd").val(); //原始密码
            var newPwd = $("#newPwd").val(); //新密码1
            var newPwd2 = $("#newPwd2").val(); //新密码2

            if ((oldPwd && newPwd && newPwd2) == '') {
                $("#tip").html("密码不能为空");
                $("#tip").show();
                submit = false;
            }
            if(submit){
                $.ajax({
                    type:"post",
                    url:"/user/updatePwd",
                    data: JSON.stringify({
                        oldPwd : oldPwd,
                        newPwd : newPwd,
                        newPwd2 : newPwd2
                    }),
                    contentType: "application/json;charset=utf-8",
                    //定义回调响应的数据格式为JSON字符串，该属性可以省略
                    dataType: "json",
                    success:function (data){
                        if(data.code == 200 ){
                            $("#tip").hide();
                            $("#pwd_form").submit();
                            alert("修改成功，请重新登录!")
                            window.location.href = "/user/logout"
                        }else if(data.code != 200){
                            $("#tip").html(data.info);
                            $("#tip").show();
                        }
                    }
                });
            }
        }
    });


</script>


</body>
</html>